<template>
  <div class="homework-list flex flex-wrap justify-between content-start">
    <div class="item bg-white flex mb-16px" v-for="i in list" :key="i.id">
      <div class="color-bar h-full"></div>
      <div class="flex-1 px-14px box-border flex flex-col relative">
        <span class="unread absolute bg-FF4040" v-show="i.unread"></span>
        <div class="header py-14px box-border flex items-center">
          <img class="icon-teacher" src="static/icons/icon-zylb-jiaoshihead@2x.png" mode="" />
          <div class="detail flex-1 flex flex-col pl-8px">
            <div class="name font-medium text-333">
              {{ i.examCode ? '考试' : '作业' }}-{{ i.teacherName }} 老师
            </div>
            <div class="time text-9CADBB mt-6px">
              {{ $utils.parseTime(i.createTime) }}
            </div>
          </div>
          <div
            class="status px-14px flex items-center"
            :class="i.upScoreStatus == 0 ? 'text-FF4040 bg-FF4040-10' : ''"
            v-show="i.upScoreStatus == 0"
          >
            待录入
          </div>
          <div
            class="status px-14px flex items-center"
            :class="i.upScoreStatus == 1 ? 'text-30C9A1 bg-30C9A1-10' : ''"
            v-show="i.upScoreStatus == 1"
          >
            已录入
          </div>
        </div>
        <div class="content flex-1 py-14px box-border relative">
          <div class="row">
            <span class="text-A3A3A3">{{ i.examCode ? '考试' : '作业' }}科目：</span
            ><span class="text-333 ellipsis">{{ i.subject | subjectName(subjectDict) }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">{{ i.examCode ? '考试' : '作业' }}标题：</span
            ><span class="text-333 ellipsis">{{ i.examName }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">{{ i.examCode ? '考试' : '作业' }}类型：</span
            ><span class="text-333 ellipsis">{{ i.examCode ? '考试' : '作业' }}</span>
          </div>
          <div class="row" v-show="i.endTime">
            <span class="text-A3A3A3">作答时间：</span
            ><span class="text-333 ellipsis" style="text-overflow: inherit; white-space: inherit">{{
              i | timeRange
            }}</span>
          </div>
          <div class="row" v-if="i.questionNum">
            <span class="text-A3A3A3">题目数量：</span
            ><span class="text-333 ellipsis">{{ i.questionNum }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">{{ i.examCode ? '考试' : '作业' }}内容：</span
            ><span class="text-333 ellipsis">{{ i.examContent }}</span>
          </div>
          <div class="row">
            <span class="text-A3A3A3">发布范围：</span
            ><span class="text-333 ellipsis">{{ i | studentsRange }}</span>
          </div>
          <div
            class="btn absolute text-white bg-51C3FF px-22px flex items-center"
            @click="todo(i)"
            v-show="i.questionNum || i.studentStatus === 0"
          >
            <span>录入成绩</span>
          </div>
        </div>
      </div>
    </div>
    <div class="item-fill-block" v-if="list.length % 3 === 2"></div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  filters: {
    subjectName: function (id, dict) {
      if (!Array.isArray(dict)) {
        return ''
      }

      return dict.find((s) => s.value === id).label
    },
    timeRange: function (item) {
      const { beginTime, endTime } = item
      return `${beginTime} ~ ${endTime}`
    },
    studentsRange: function (item) {
      const { studentNames = [] } = item

      if (studentNames.length <= 3) {
        return `${studentNames.join(',')}等${studentNames.length}名同学`
      } else {
        return `${studentNames[0]},${studentNames[1]},${studentNames[2]}等${studentNames.length}名同学`
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      subjectDict: null
    }
  },
  async created() {
    this.subjectDict = await this.getDictByType('subject')
  },
  methods: {
    ...mapActions(['getDictByType']),
    todo(item) {
      this.$emit('todo', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.homework-list {
  .item {
    width: 403px;
    height: 439px;
    border-radius: 16px;
    overflow: hidden;

    &-fill-block {
      content: '';
      width: 403px;
      height: 439px;
      border-radius: 16px;
      overflow: hidden;
    }

    .color-bar {
      width: 6px;
      background: linear-gradient(180deg, #51c3ff 0%, #a2ffc6 100%);
    }

    .unread {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      top: 3px;
      right: 3px;
    }

    .header {
      height: 84px;
      border-bottom: 1px solid #f0f0f0;

      .icon-teacher {
        width: 56px;
        height: 56px;
      }

      .detail {
        align-content: center;

        .name {
          font-size: 22px;
          line-height: 28px;
          text-wrap: nowrap;
          text-overflow: ellipsis;
          width: 228px;
          overflow: hidden;
        }

        .time {
          font-size: 16px;
          line-height: 16px;
          white-space: nowrap;
        }
      }

      .status {
        height: 28px;
        font-size: 16px;
        border-radius: 14px;
        white-space: nowrap;
      }
    }

    .content {
      .row {
        font-size: 20px;
        line-height: 28px;
        display: flex;
        white-space: nowrap;
        .ellipsis {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 268px;
          display: block;
        }

        &:not(:last-child) {
          margin-bottom: 8px;
        }
      }

      .btn {
        height: 40px;
        bottom: 14px;
        right: 0;
        font-size: 18px;
        border-radius: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
